<template>
<view>
<!--pages/wenda/wenda.wxml-->
<!--<import src="../webview/contact.wxml"></import>-->
<!-- <template is="inContact" data="{{showtk}}" /> -->
<view class="body">
  <!-- 各级分类内容 -->
  <view v-for="(wenda, index) in wendaData" :key="index" class="sy-box">
    <view style="margin: 0 30rpx;">
      <view class="title-box">
        <view class="title">
          <image src="/static/images/dbline.png"></image>
          <text>{{wenda.wapname}}</text>
        </view>
        <!-- 子栏目 -->
        <view class="lanmu">
          <text v-for="(item, index2) in wenda.classlist" :key="index2" @tap="lanmuTap" :data-id="item.id" :data-name="item.classname" :data-type="item.pagetype">{{item.classname}}</text>
        </view>
      </view>
      <!-- 工具 -->
      <view class="gongju-box" v-if="wenda.tool!=''">
        <view v-for="(item, index2) in wenda.tool" :key="index2" class="gongju" @tap="servBtn" :data-path="item.path" :data-appid="item.appid" :data-title="item.title">
          <image :src="item.logo"></image>
          <text>{{item.stitle}}</text>
        </view>
      </view>
      <!-- 文章列表 -->
      <navigator v-for="(item, index2) in wenda.infolist" :key="index2" class="content" :url="'../article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + (citycode=='sz'?'sz':citycode)">
        <view class="title">
          <text>{{item.title}}</text>
          <view class="zuan-time">
            <view class="time">{{item.publictime}}</view>
          </view>
        </view>
        <image :src="item.images" v-if="item.images" mode="aspectFill"></image>
      </navigator>
    </view>
    <!-- 查看更多 -->
    <navigator class="see-more" :url="'../article/index/index?id=' + wenda.id + '&type=' + wenda.pagetype + '&city=' + citycode">
      <view>查看更多</view>
    </navigator>
  </view>

</view>

<!-- 底部logo -->
<view class="bottom">
  <image src="/static/images/logo.png"></image>
</view>
</view>
</template>

<script>
// pages/wenda/wenda.js
//index.js
//获取应用实例
const app = getApp();
const util = require("../../utils/util.js");

export default {
  data() {
    return {
      menuindex: 0,
      // cityname: app.extConfig.cityname,
      // citycode: app.extConfig.citycode,
      showtk: false,
      path: '',
      city: "深圳",
      citycode: 'sz',
      id: "",
      type: "",
      wendaData: "",
      linkname: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (opt) {
    this.setData({
      id: opt.id ? opt.id : '',
      type: opt.type ? opt.type : '',
      citycode: opt.city ? opt.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : this.citycode
    });
    uni.setStorageSync('citycode', this.citycode);
    util.cityList().then(res => {
      let citydata = res.allcity.filter(v => v.citycode == this.citycode);
      this.setData({
        city: citydata[0].cityname
      });
      uni.setStorageSync('city', this.city);
    });
    util.getUrl(app.globalData.url).then(res => {
      this.getwendalist();
    });
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  // 分享朋友圈
  onShareTimeline: function () {
    return {
      query: {
        id: this.id,
        type: this.type,
        city: this.citycode
      }
    };
  },
  methods: {
    // 问答频道
    getwendalist() {
      let data = {
        citycode: "wenda",
        action: "indexlist",
        city: uni.getStorageSync("city"),
        pagesize: 5,
        version: app.globalData.version
      };
      util.request('index.php', data, 'GET').then(res => {
        this.setData({
          wendaData: res.data
        });
        this.wendaData.forEach(v => {
          this.getToolData(v.wapname);
        });
      });
    },

    // 获取工具和专题接口
    getToolData(toolname) {
      let toolData = {
        action: "tools",
        city: this.city,
        keywords: toolname,
        version: app.globalData.version,
        type: "channel"
      };
      util.request('service.php', toolData).then(res => {
        this.wendaData.forEach((v, k) => {
          if (toolname == v.wapname) {
            this.wendaData[k].tool = res.data.data.slice(0, 4);
          }
        });
        this.setData({
          wendaData: this.wendaData
        });
      });
    },

    // 栏目点击事件
    lanmuTap(e) {
      let id = e.currentTarget.dataset.id;
      let type = e.currentTarget.dataset.type; // let name = e.currentTarget.dataset.name;

      uni.navigateTo({
        url: '../article/list/list?id=' + id + '&type=' + type + '&city=' + this.citycode
      });
    },

    // 工具、服务点击事件
    servBtn(e) {
      let path = e.currentTarget.dataset.path;
      let appid = e.currentTarget.dataset.appid;
      let linkname = e.currentTarget.dataset.title; // this.data.item.path = path;

      this.setData({
        path,
        linkname // item,

      });

      if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1) {
        util.navContact(linkname, path);
        this.setData({
          showtk: true
        });
      } else {
        util.navMethod(path, appid);
      }
    },

    // 进入客服会话
    contact() {
      this.setData({
        showtk: false
      });
      let replay = {
        action: "reply",
        title: this.linkname,
        url: this.path,
        openid: uni.getStorageSync("openid")
      };
      util.request('user.php', replay, 'POST');
    },

    // 关闭
    close() {
      this.setData({
        showtk: false
      });
    }

  }
};
</script>
<style>
/* pages/wenda/wenda.wxss */
page{background-color: #F6F5F8;height: 100%;}
.body{margin-top: 10rpx;}
.top-box{display: flex;align-items: center;margin: 20rpx 30rpx 0 20rpx;}
.city_style{display: flex;flex-direction: row;align-items: center;margin-left: 25rpx;}
.city_style text{font-size:26rpx;font-family:PingFang SC;font-weight:600;color:rgba(0,0,0,1);}
.city_style image{width: 19rpx;height: 10rpx;margin-left: 10rpx;}

.input-box{height:62rpx;border-radius:30rpx;
  margin-left: 25rpx;display: flex;align-items: center;font-size: 28rpx;flex: 1;
  padding: 0 30rpx;background-color: #ffffff;}
.input-box image{width: 30rpx;height: 30rpx;margin-right: 20rpx;}
.input-box input{flex: 1}

.type-box{display: flex;align-items: center;}
.type-style{display: flex;flex-direction: column;align-items: center;margin-right: 46rpx;}
.type-style text{font-size:32rpx;font-family:PingFang SC;font-weight:400;color:#666666;
  white-space:nowrap;margin-bottom: 10rpx;}
.hline{border-bottom: 8rpx solid #FF7F2A;width:60rpx;border-radius: 10rpx;}

.swimg{width: 690rpx;height: 360rpx;border-radius: 10rpx;position: relative;}
.imgtext{background:rgba(0,0,0,0.41);padding:10rpx 20rpx;width: 651rpx;
  border-radius:0rpx 0rpx 10rpx 10rpx;font-size:28rpx;color: #ffffff;position: absolute;bottom: 0;}

.hotdot{background-color: #ffffff;padding: 38rpx 0;border-radius: 14rpx;margin: 30rpx 32rpx 0 32rpx;}
.hot-title{display: flex;flex-direction: row; align-items: center;flex: 1;}
.hot-title image{width: 29rpx;height: 39rpx;margin-right: 10rpx;}
.hot-title text{font-size:35rpx;font-family:PingFang SC;font-weight:600;
color:rgba(53,53,53,1);line-height: 45rpx;}
/* .hot-content{border-bottom: 1rpx solid #CCCCCC;padding:20rpx 0;display: flex;align-items: center;justify-content: space-between;
  margin-top: 10rpx;}
.hot-content .titles1{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
.hot-content text{font-size:34rpx;font-family:PingFang SC;font-weight:400;color:rgba(0,0,0,1);}
.hot-content image{width:188rpx;height:140rpx;border-radius:4rpx;margin-left: 20rpx;flex-shrink: 0;}
.hot-content:last-child{border: none} */
.hot-content{border-bottom: 1rpx solid #CCCCCC;padding:20rpx 0;display: flex;align-items: center;justify-content: space-between;
  margin-top: 10rpx;}
.hot-content .title{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
.hot-content .title text{font-size:28rpx;font-family:PingFang SC;font-weight:400;color:rgba(0,0,0,1);}
.hot-content image{width:188rpx;height:140rpx;border-radius:4rpx;margin-left: 20rpx;flex-shrink: 0;}
.hot-content:last-child{border: 0;}

.sy-box{background-color: #ffffff;padding: 38rpx 0;margin: 30rpx 32rpx 0 32rpx;border-radius: 14rpx;}
.title-box{display: flex;align-items: center;justify-content: space-between;}
.title{display: flex;flex-direction: row; align-items: center;flex: 1;}
.title image{width: 16rpx;height: 28rpx;margin-right: 10rpx;}
.title text{font-size:35rpx;font-family:PingFang SC;font-weight:600;color:rgba(53,53,53,1);
  line-height: 45rpx;}
.sline{border-left: 10rpx solid #FF7F2A;height: 45rpx;margin-right: 15rpx; }
.title1{display: flex;flex-direction: row; align-items: center;justify-content: center;
  padding: 25rpx 0;}
/* .title1:last-child{border: none;margin-bottom: 0;} */
.title1 text{font-size:28rpx;font-family:PingFang SC;font-weight:400;color:rgba(255,102,0,1);margin-right: 15rpx;}
.title1 image{width:14rpx;height:25rpx;}

.icon-box{display: flex;flex-direction: row; flex-wrap: wrap;display: -webkit-flex;
  justify-content: space-between;margin-top: 50rpx;}
.icon-style{display:flex;flex-direction: column;align-items: center;margin-left: 15rpx;margin-right: 50rpx;}
.icon-style image{width:104rpx;height:84rpx;}
.icon-style text{font-size:28rpx;font-family:PingFang SC;font-weight:400;
  color:rgba(102,102,102,1);margin-top: 20rpx;margin-bottom: 20rpx;}

.content{border-bottom: 1rpx solid #CCCCCC;padding:20rpx 0;display: flex;align-items: center;justify-content: space-between;
  margin-top: 10rpx;}
.content .title{display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;}
.content text{font-size:28rpx;font-family:PingFang SC;font-weight:400;color:rgba(0,0,0,1);}
.content image{width:188rpx;height:140rpx;border-radius:4rpx;margin-left: 20rpx;flex-shrink: 0;}
.zuan-time{display: flex;align-items: center;justify-content: space-between; margin-top:15rpx; 
  width: 100%;}
.zuanti{border:2rpx solid rgba(255,102,0,1);opacity:1;border-radius:16rpx;font-size:18rpx;
  font-family:PingFang SC;font-weight:500;color:rgba(255,102,0,1);padding:5rpx 12rpx;}
.time{font-size:24rpx;font-family:PingFang SC;font-weight:400;color:rgba(153,153,153,1);}
.content:last-child{border: none}

/* 查看更多 */
.see-more{display: flex;justify-content: center;margin-top: 20rpx;}
.see-more view{background-color: #EEEEEE;padding: 20rpx 40rpx;font-size:26rpx;border-radius:12rpx;
font-family:PingFang SC;font-weight:600;color: #141414;text-align: center;width: 200rpx;}
/* 底部logo */
.bottom{width:100%;opacity:1;padding: 20rpx 0;text-align: center;}
.bottom image{width: 154rpx;height:62rpx; }
::-webkit-scrollbar
{
width: 0;
height: 0;
color: transparent;
}

.lanmu{display: flex;align-items: center;}
.lanmu text{font-size:28rpx;font-family:PingFang SC;font-weight:600;
color:rgba(20,20,20,1);opacity:1;border-right: 2rpx solid rgba(20,20,20,1);
padding-right: 20rpx;margin-right: 20rpx;text-align: center;}
.lanmu text:last-child{border: 0;margin-right: 0;padding-right: 0;}

/* 工具服务 */
/* .gongju-box{display: flex;flex-direction: row;align-items: center;flex-wrap: wrap;
  margin-top: 10rpx;}
.gongju{background:rgba(242,242,242,1);opacity:1;border-radius:3rpx;padding: 15rpx 20rpx;
  font-size:24rpx;font-family:PingFang SC;font-weight:500;color:rgba(136,136,136,1);
  margin-right: 22rpx;margin-top: 16rpx;} */
/* .gongju:nth-child(4n){margin-right: 0;} */
.gongju-box{display: flex;margin: 40rpx 0;}
.gongju{display: flex;flex-direction: column;align-items: center;margin-right: 62rpx;}
.gongju image{width: 90rpx;height: 90rpx;margin-bottom: 16rpx;}
.gongju text{font-size:26rpx;font-family:PingFang SC;font-weight:500;line-height:36rpx;
color:rgba(84,84,84,1);opacity:1;width: 110rpx;text-align: center;}
.gzh-care{position: fixed;bottom: 0;width: 100%;}

/* 收藏小程序的提示 */
.cue-box{position: fixed;top: 0rpx;/*  #ifdef  H5  */top: calc(88rpx + constant(safe-area-inset-top));top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */right:88rpx;}
.cue-box image{width: 554rpx;height: 83rpx;}

/* 频道选择 */
.main-box{position: relative;box-sizing: border-box;}
.channelAbsolute{margin:30rpx 55rpx;
position: absolute;z-index: 5;top:0;}
.channelFixed{background-color: #ffffff;margin-bottom: 30rpx;padding: 15rpx 55rpx;
position: fixed;top: 0rpx;/*  #ifdef  H5  */top: calc(88rpx + constant(safe-area-inset-top));top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */z-index:99;width: 100%;}
.channel-box{display: flex;}

.channel{display: flex;flex-direction: column;align-items: center; margin-right: 75rpx;}
.channel text{font-size:30rpx;font-family:PingFang SC;font-weight:600;line-height:42rpx;
opacity:1;margin-bottom: 15rpx;white-space:nowrap;}
.channel image{width: 42rpx;height: 19rpx;}



</style>